<script setup lang="ts">
import { bannerApi } from "@/api";
import { onMounted, ref } from "vue";
import type { bannerInfo } from "@/utils/types";
import messageBox from "@/utils/messageBox";

const bannerList = ref<any[]>([]);
const visitable = ref<boolean>(false);
const bannerInfo = ref<bannerInfo>({
  img: "",
  alt: "",
  link: "",
});
const getBannerList = () => {
  bannerApi.bannerList().then((res) => {
    console.log(res, "轮播图列表");
    bannerList.value = res.data.data;
  });
};

onMounted(() => {
  getBannerList();
});

const updateBanner = (row: any) => {
  const info = {
    bannerid: row.bannerid,
    flag: row.flag ? "false" : "true",
  };
  bannerApi.updateBanner(info).then((res) => {
    console.log(res, "修改轮播图状态");
    getBannerList();
    visitable.value = false;
  });
};

const addBanner = () => {
  bannerApi.addBanner(bannerInfo.value).then((res) => {
    console.log(res, "添加轮播图");
    getBannerList();
  });
};

const deleteBanner = (id: string) => {
  messageBox("是否删除该条目").then(() => {
    bannerApi.deleteBanner(id).then((res) => {
      console.log(res, "删除轮播图");
      getBannerList();
    });
  });
};

const deleteAll = () => {
  messageBox("是否删除全部图片").then(() => {
    bannerApi.removeAllBanner().then((res) => {
      console.log(res, "删除全部图片后返回值");
      getBannerList();
    });
  });
};
</script>
<template>
  <div class="banner">
    <div class="btn">
      <el-button type="primary" @click="visitable = true">添加图片</el-button>
      <el-button type="danger" @click="deleteAll()">删除全部</el-button>
    </div>
    <el-table :data="bannerList" border>
      <el-table-column type="expand">
        <template #default="{ row }">
          <img :src="row.img" :alt="row.alt" class="img" />
        </template>
      </el-table-column>
      <el-table-column type="index" label="#" />
      <el-table-column label="图片ID" prop="bannerid" width="400px"></el-table-column>
      <el-table-column label="图片主题" prop="alt"></el-table-column>
      <el-table-column label="状态">
        <template #default="{ row }">
          <span>{{ row.flag ? "可用" : "不可用" }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button
            @click="updateBanner(row)"
            :type="row.flag ? 'warning' : 'success'"
            :icon="row.flag ? 'Close' : 'Check'">
            {{ row.flag ? "禁用" : "启用" }}
          </el-button>
          <el-button
            type="danger"
            icon="Delete"
            @click="deleteBanner(row.bannerid)"></el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <el-dialog v-model="visitable" title="添加图片" width="500">
    <el-form
      :model="bannerInfo"
      class="demo-ruleForm"
      label-width="auto"
      ref="adminFormRef">
      <el-form-item label="图片地址" prop="img">
        <el-input v-model="bannerInfo.img" />
      </el-form-item>
      <el-form-item label="提示信息" prop="alt">
        <el-input v-model="bannerInfo.alt" />
      </el-form-item>
      <el-form-item label="链接地址" prop="link">
        <el-input v-model="bannerInfo.link" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="visitable = false">取消</el-button>
        <el-button type="primary" @click="addBanner()">提交</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>
.banner {
  padding: 20px;
  border-radius: 5px;
  background: #fff;
  .btn {
    margin-bottom: 20px;
  }
  .img {
    max-width: 800px;
  }
}
</style>
